<template>
  <view class="password-main">
    <form @submit="submit">
      <view class="uni-form-item uni-column">
        <input
          class="uni-input"
          password
          v-model="formData.oldPassword"
          type="text"
          placeholder="请输入旧密码"
        />
      </view>
      <view class="uni-form-item uni-column">
        <input
          class="uni-input"
          password
          v-model="formData.newPassword"
          type="text"
          placeholder="请输入新密码"
        />
      </view>
      <view class="uni-form-item uni-column">
        <input
          class="uni-input"
          v-model="formData.newPassword1"
          password
          type="text"
          placeholder="请确认新密码"
        />
      </view>

      <view class="uni-btn-v">
        <button form-type="submit" type="warn">确认修改</button>
      </view>

      <uni-popup ref="popup" type="message">
        <uni-popup-message
          type="success"
          message="密码修改成功"
        ></uni-popup-message>
      </uni-popup>
      <view style="margin-top: 10px; color: #e64340;">{{ errorTip }}</view>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        oldPassword: "",
        newPassword: "",
        newPassword1: "",
      },
      errorTip: "",
    };
  },
  mounted() {},
  methods: {
    async submit() {
      if (this.formData.newPassword == this.formData.newPassword1) {
        this.errorTip = "";
        let res = await this.$api.resetPassword(
          `?OldPassword=${this.formData.oldPassword}&NewPassword=${this.formData.newPassword}`
        );
        if (res.data) {
          this.$refs.popup.open();

          setTimeout(() => {
            this.$refs.popup.close();
          }, 2000);
        }
        this.$store.commit("token", res.token);

        this.goLink("pages/user/index");
      } else {
        this.errorTip = "请确认两次输入的新密码一致";
      }
    },
  },
};
</script>

<style lang="less" scope>
@import "@/static/less/flex.less";
uni-page-body {
  height: 100%;
}
.password-main {
  height: 100%;
  width: 100%;
  background: #fff;
  padding: 60upx 60upx;

  .uni-form-item {
    padding-left: 20upx;
    margin-bottom: 40upx;
    border: 2upx solid #eee;
  }

  .uni-input {
    height: 90upx;
    line-height: 90upx;
    font-size: 32upx;
  }
}
</style>
